<template>
  <div class="white">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="标题：">
          <el-input
            v-model="formInline.user"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit()"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            @click="soSubmits()"
            >重置</el-button
          >
        </el-form-item>
        
      </el-form>
    </div>
    
    <div>
      <el-dialog title="新增" :visible.sync="dialogFormVisible"  :rules="rules">
        <el-form :model="form" ref="form" :rules="rules">
          <el-col :span="12">
            <el-form-item
              label="标题："
              prop="dicTitle"

              size="mini"
            >
              <el-input
                v-model="form.dicTitle"
                autocomplete="off"
                style="width: 50%"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="消息类型："
              placeholder="请选择消息类型："

              prop="messageType"
            >
              <el-select
                v-model="form.messageType"
                placeholder="请选择活动区域"
                style="width: 50%"
                size="mini"
              >
                <el-option v-for="item in options" :key="item.value"  :label="item.label" :value="item.value"></el-option>
          
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开始时间："

              size="mini"
              prop="startTime"
            >
              <div class="block">
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="选择日期时间"

                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="结束时间："

              size="mini"
              prop="finishTime"
            >
              <div class="block">
                <el-date-picker
                  v-model="form.finishTime"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="优先级："
              prop="priority"
              placeholder="请选择优先级"

            >
              <el-select
                v-model="form.priority"
                placeholder="请选择活动区域"
                style="width: 50%"
                size="mini"
              >
                <el-option v-for="item in optionsFirst" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="通告类型："
              placeholder="请选择通告类型："

              prop="notificationType"
            >
              <el-select
                v-model="form.notificationType"
                placeholder="请选择活动区域"
                style="width: 50%"
                size="mini"
                @change="changeOption" 
              >
                <el-option v-for="item in optionsTwo" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="摘要："

              size="mini"
              prop="abstract"
            >
              <textarea
                v-model="form.names"
                autocomplete="off"
                style="width: 50%"
                placeholder="请输入摘要"
              ></textarea>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item
              label="指定用户："
              prop="SpecifyUser"

              size="mini"
              v-if="kkk"
            >
              <el-input
                v-model="form.SpecifyUser"
                autocomplete="off"
                style="width: 50%"
                placeholder="请输入标题"
                 @focus="openInput"
              ></el-input>
            </el-form-item>
               <el-form-item v-if="kkk" class="positionTag">       
                <el-tag
                v-for="(tag , index) in tagsList"
                :key="index"
                closable
                color="white"
                type= 'info'
                @close="closeTag(tag)"
              >
                {{tag}}
              </el-tag>
              
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogForm('form')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
   <el-dialog title="选择用户"
   :visible.sync="see"
   :append-to-body="true"
   >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="账号：">
            <el-input
              v-model="formInline.userName"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-select v-model="formInline.sex" placeholder="请选择性别">
              <el-option label="男性" value="male"></el-option>
              <el-option label="女性" value="female"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱：" v-if="!isappear">
            <el-input
              v-model="formInline.email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" v-if="!isappear">
            <el-input
              v-model="formInline.userPhone"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态：" v-if="!isappear">
            <el-select v-model="formInline.state" placeholder="请选择状态">
              <el-option
                v-for="item in optionsNew"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="userListSearch()"
              >查询</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="refresh()"
              >重置</el-button
            >
            <el-button
              type="text"
              icon="el-icon-arrow-down"
              v-if="isappear"
              @click="change"
              >展开</el-button
            >
            <el-button批量删除
              type="text"
              icon="el-icon-arrow-up"
              v-if="!isappear"
              @click="change"
              >收起</el-button批量删除
            >
          </el-form-item>
        </el-form>
        <annount
        :headerData="headerData1"
        :tableData="tableData1"
        @SelectionChange="SelectionChangeChoose"
       @delButton='delButton'
        ></annount>
             <span slot="footer" class="dialog-footer">
          <el-button @click="chooseDialogVisible = false">关 闭</el-button>
          <el-button type="primary" @click="choose(_self.userIds)"
            >确 定</el-button
          >
        </span>
            <el-pagination
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
      :current-page="pageNos"
      :page-sizes="[5,10, 20, 30]"
      :page-size="pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
   </el-dialog>
      <el-button
        type="primary"
        @click="dialogFormVisible=true"
        size="mini"
        icon="el-icon-plus"
        >新增</el-button
      >
      <el-button type="primary" size="mini" icon="el-icon-upload2"
        >导出</el-button
      >
      <el-button type="primary" size="mini" icon="el-icon-download"
        >导入</el-button
      >
   <el-dropdown click="add">
      <span class="el-dropdown-link" v-if="delButton">
       批量删除<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <el-button type="text" @click="dialogVisible = true"
            ><i class="el-icon-delete"></i>删除</el-button></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    </div>
    
    <annount :headerData="headerData" :tableData="tableData"  @delButton='delButton' >
      
      <template v-slot:operation="{ row, scope }">
        <div>
       <el-button type="text" @click="dialogs(scope)">编辑</el-button>|
          <el-dropdown trigger="click">
            <a>更多<i class="el-icon-arrow-down"></i></a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>详情</el-dropdown-item>
              <el-dropdown-item>密码</el-dropdown-item>
              <el-dropdown-item
                ><span @click="delDataSearch(scope)">删除</span>
              </el-dropdown-item>
              <el-dropdown-item>解冻</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </template>
    </annount>
    <el-dialog title="新增" :visible.sync="dialog"  :rules="rules">
        <el-form :model="formList" ref="form" :rules="rules">
          <el-col :span="12">
            <el-form-item
              label="标题："
              prop="dicTitle"

              size="mini"
            >
              <el-input
                v-model="formList.dicTitle"
                autocomplete="off"
                style="width: 50%"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="消息类型："
              placeholder="请选择消息类型："

              prop="messageType"
            >
              <el-select
                v-model="formList.messageType"
                placeholder="请选择活动区域"
                style="width: 50%"
                size="mini"
              >
                <el-option v-for="item in options" :key="item.value"  :label="item.label" :value="item.value"></el-option>
          
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开始时间："

              size="mini"
              prop="startTime"
            >
              <div class="block">
                <el-date-picker
                  v-model="formList.startTime"
                  type="datetime"
                  placeholder="选择日期时间"

                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="结束时间："

              size="mini"
              prop="finishTime"
            >
              <div class="block">
                <el-date-picker
                  v-model="formList.finishTime"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="优先级："
              prop="priority"
              placeholder="请选择优先级"

            >
              <el-select
                v-model="formList.priority"
                placeholder="请选择活动区域"
                style="width: 50%"
                size="mini"
              >
                <el-option v-for="item in optionsFirst" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="通告类型："
              placeholder="请选择通告类型："

              prop="notificationType"
            >
              <el-select
                v-model="formList.notificationType"
                placeholder="请选择活动区域"
                style="width: 50%"
                size="mini"
                @change="changeOption" 
              >
                <el-option v-for="item in optionsTwo" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="摘要："

              size="mini"
              prop="abstract"
            >
              <textarea
                v-model="formList.names"
                autocomplete="off"
                style="width: 50%"
                placeholder="请输入摘要"
              ></textarea>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item
              label="指定用户："
              prop="SpecifyUser"

              size="mini"
              v-if="kkk"
            >
              <el-input
                v-model="formList.SpecifyUser"
                autocomplete="off"
                style="width: 50%"
                placeholder="请输入标题"
                 @focus="openInput"
              ></el-input>
            </el-form-item>
               <el-form-item v-if="kkk" class="positionTag">       
                <el-tag
                v-for="(tag , index) in tagsList"
                :key="index"
                closable
                color="white"
                type= 'info'
                @close="closeTag(tag)"
              >
                {{tag}}
              </el-tag>
              
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogForm('form')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    <!-- 批量删除弹框 -->
<el-dialog
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <h4 class="el-icon-question
"  icon-color="#faad14"
>确认删除</h4>
  <h6>是否删除选中数据?</h6>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import annount from "@/components/xiaohei/annount.vue";
import { informaTion,addition ,add,Editor} from "@/api/annount";
export default {
  name: "annountCement",
  data() {
    return {
      dialog:false,
      delButton:false,
      dialogVisible:false,
      pageNos:1,
      pageSizes:5,
      isappear:true,
      see:false,
     kkk:false,
      dialogFormVisible: false,
      tableData: [],
      tableData1:[],
      Uesrids:[],
      tagsList:[],
      pageNo: 1,
      pageSize: 10,
      formInline: {
        user: "",
        userName: "",
        sex: "",
        userPhone: "",
        email: "",
        state: "",
      
      },
           rules: {
        dicTitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
        messageType: [
          { required: true, message: "请选择消息类型", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        finishTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        priority: [
          { required: true, message: "请选择优先级", trigger: "change" },
        ],
        notificationType: [
          { required: true, message: "请选择通告类型", trigger: "change" },
        ],
        // abstract: [{ required: true, message: "请输入摘要", trigger: "blur" }],
      },
           optionsNew: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "解冻",
        },
      ],
       optionsTwo: [
        {
          value: "USER",
          label: "指定用户",
        },
        {
          value: "ALL",
          label: "全体用户",
        },
      ],
         optionsFirst: [
        {
          value: "L",
          label: "低",
        },
        {
          value: "M",
          label: "中",
        },
        {
          value: "H",
          label: "高",
        },
      ],
       headerData1: [
        {
          prop: "userAccount",
          label: "用户账号",
        },
        {
          prop: "userName",
          label: "用户名称",
        },
        {
          prop: "sex",
          label: "性别",
        },
        {
          prop: "phoneNum",
          label: "手机号码",
        },
        {
          prop: "email",
          label: "邮箱",
        },
        {
          prop: "state",
          label: "状态",
        },
      ],
        options: [
        {
          value: "1",
          label: "通知类型",
        },
        {
          value: "2",
          label: "系统消息",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    
      headerData: [
        {
          prop: "id",
          label: "#",
          width: "120",
          sortable: true,
        },
        {
          prop: "titile",
          label: "标题",
          width: "120",
        },
        {
          prop: "MessageType",
          label: "消息类型",
          width: "150",
          slot: true,
        },
        {
          prop: "ReleasePeople",
          label: "发布人",
          width: "130",
          sortable: true,
        },
        {
          prop: "priority_dictText",
          label: "优先级",
          width: "140",
          sortable: true,
        },
        {
          prop: "CircularObject",
          label: "通告对象",
          width: "140",
        },
        {
          prop: "PostStatus_dictText",
          label: "发布状态",
        },

        {
          prop: "ReleaseTime",
          label: "发布时间",
          width: "130",
        },
        {
          prop: "CancelTime",
          label: "撤销时间",
          width: "130",
        },
        {
          prop: "operation",
          label: "操作",
          width: "200",
          slot: true,
        },
      ],
      Uesrid:[],
      form: {
        dicTitle: "",
        messageType: "",
        startTime: "",
        finishTime: "",
        priority: "",
        notificationType: '',
        abstract: "",
        SpecifyUser: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
        formList:{
         dicTitle: "",
        messageType: "",
        startTime: "",
        finishTime: "",
        priority: "",
        notificationType: '',
        abstract: "",
        SpecifyUser: "",
      },
    };
  },
  methods: {
    dialogs(val){
      console.log(val);
      let _self = this
      _self.dialog=true
     _self.formList.dicTitle = val.titile
     _self.formList.messageType = val.messageType
     _self.formList.startTime = val.startTime
     _self.formList.finishTime = val.endTime
     _self.formList.priority = val.priority_dictText
     _self.formInline.notificationType = val.CircularObject
     _self.formList.abstract = val.msgAbstract
     _self.createBy = val.createBy
    _self.id=val.id
    _self.ReleasePeople=val.ReleasePeople
          _self.PostStatus = val.PostStatus;
          _self.ReleaseTime = val.ReleaseTime;
      _self.CancelTime = val.CancelTime;    
    console.log(val);
    },
    delButton(val){
      console.log(1234);
      console.log(val);
      _self.delButton=val
      console.log(_self.delButton);
    },
    SelectionChangeChoose(val){
      let _self =this
      _self.userIds=val
    },
    choose(val){
      let _self=this
      _self.tagsList=[]
      for(let index in val){
          _self.userId.push(
            val[index].id+""
          )
          _self.tagsList.push(
            val[index].userName
          )
      }
      _self.see=false
      console.log(_self.tagsList);
    },
    //指定用户重置
    refresh(){
      let _self = this
      _self.formInline.userName=""
      _self.formInline.sex=""
      _self.formInline.userPhone=""
      _self.formInline.email=""
      _self.formInline.state=""
      _self.addSearch() 

    },
    //指定用户查询
    userListSearch(){
      let _self = this;
      _self.pageNos=1
      _self.addSearch()
    },
    // 指定用户数据列表数据总数
    handleSizeChange1(val){
      this.pageSizes=val
      this.addSearch()
    },
    //指定用户数据第几页
    handleCurrentChange1(){
      this.pageNos=val
      this.addSearch()
    },
    // 指定用户数据列表
    addSearch(){
     let _self = this;
     _self.tableData1=[];
     let data = {
       pageNo:_self.pageNos,
       pageSizes:_self.pageSizes,
        username: _self.formInline.userName,
        sex: _self.formInline.sex,
        email: _self.formInline.email,
        phone: _self.formInline.userPhone,
        status: _self.formInline.state,
     }
     add(data).then((res)=>{
      console.log(res);
      let List = res.result.records
       if(res.code==0){
        for(let item of List){
          _self.tableData1.push({
               userAccount: item.username,
              userName: item.realname,
              sex: item.sex,
              phoneNum: item.phone,
              email: item.email,
              state: item.status_dictText,
              status: item.status,
              id:item.id
          })
        }
         _self.total = res.result.total;
       }
     })
    },   
     // 展开弹框
       change() {
      let _self = this;
      _self.isappear = !_self.isappear;
    },
    //
    openInput(){
      let _self=this
      _self.see=true
    },
        changeOption(){
          let _self = this;
          if(_self.form.notificationType=="USER"){
            _self.kkk=true
          }else{
            _self.kkk=false
          }
        },
        closeTag(tag) {
      let _self = this;
      _self.tagsList.splice( _self.tagsList.indexOf(tag), 1);
    },
    //增加
    dialogForm(formName){
      let _self = this
      _self.$refs[formName].validate((valid)=>{
        if(valid){
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
            hours: nowDate.getHours(),
            minutes: nowDate.getMinutes(),
            seconds: nowDate.getSeconds(),
          };
          let newmonth = date.month >= 10 ? date.month : "0" + date.month;
          let newday = date.date > 10 ? date.date : "0" + date.date;
          let newminutes =
            date.minutes < 10 ? "0" + date.minutes : date.minutes;
          let newseconds =
            date.seconds < 10 ? "0" + date.seconds : date.seconds;
          // 我需要的时间格式为 "yyyy-MM-dd HH:mm:ss" 有不一样的自己拼别的，都是字符串拼接
          _self.form.startTime =
            date.year +
            "-" +
            newmonth +
            "-" +
            newday +
            " " +
            date.hours +
            ":" +
            newminutes +
            ":" +
            newseconds;
          _self.form.finishTime =
            date.year +
            "-" +
            newmonth +
            "-" +
            newday +
            " " +
            date.hours +
            ":" +
            newminutes +
            ":" +
            newseconds;
          _self.dialogFormVisible=false
      let data={
         titile:_self.form.dicTitle,
         msgCategory:_self.form.messageType,
         startTime:_self.form.startTime,
         endTime:_self.form.endTime,
         priority:_self.form.priority,
         msgAbstract:_self.form.dicTitle,
         msgType:_self.form.notificationType,
        userIds:_self.Uesrid.join()
      }
      addition(data).then((res)=>{
        console.log(res);
        _self.$message({
                type: "success",
                message: res.message,
              });
              _self.informaTionSearch()
      })
        }
      })
    
    }, 
    //列表重置
    soSubmits() {
      this.formInline.user = "";
      this.informaTionSearch();
    },
    //当前页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.informaTionSearch();
    },
    //多少页
    handleSizeChange(val) {
      this.pageSize = val;
      this.informaTionSearch();
    },

    // 列表搜索
    onSubmit() {
      let _self = this;
      _self.pageNo = 1;
      _self.informaTionSearch();
    },

    // 列表数据
    informaTionSearch() {
      let _self = this;
      _self.tableData = [];
      let data = {
        pageNo: _self.pageNo,
        pageSize: _self.pageSize,
        titile: _self.formInline.user,
      };
      informaTion(data).then((res) => {
        console.log(res);
        let List = res.result.records;
        if (res.code == 0) {
          for (let item of List) {
            _self.tableData.push(item);
          }
        }
        _self.total = res.result.total;
      });
    },
  },
  components: {
    annount,
  },
  mounted() {
    this.informaTionSearch();
    this.addSearch()
  },
};
</script>
<style>
.white {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: white;
  padding: 20px;
}
.positionTag{
  position: absolute;
  left:5px;
  top: 0px;
} 
.white .el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  margin-left: 20px;
  border: 2px solid #409eff;
  border-radius: 4px;
  padding: 4px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>